<template>
	<div class="page">

		<!-- 用户基本信息区域 -->

		<div class="base-data">

			<div class="top flex unified-flex-align">
				<div class="avatar">
					<img :src="loginUserInfo.avatar">
					<div title="更换头像" class="edit-avatar "><i class="el-icon-refresh"></i></div>
				</div>

				<p class="user-name">{{loginUserInfo.username}}</p>

			</div>

			<div class="bottom">

				<p>欢饮您,使用本系统 <span class="come">联系作者</span></p>

				<p>本系统由 <span class="myname">王嘉豪</span> 同学全栈开发</p>

				<p>本系统服务器采用UniCloud云函数提供数据服务</p>

			</div>


		</div>
		<div class="data-router">
			<div class="router-menu flex unified-flex-align">

				<div v-for="(menuItem,index) in menu" :key="index" class="router-menu-li" @click="clickMenu(index)">
					{{menuItem.name}}
				</div>

				<div class="router-menu-checked"></div>
			</div>
			<div class="router">

				<router-view></router-view>

			</div>

		</div>



	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {

		data() {

			return {
				menu: [{
						name: "个人资料",
						path: "/Home/higher_data/base"
					},
					{
						name: "我的头像",
						path: "/Home/higher_data/avatar"
					},
					{
						name: "账户安全",
						path: "/Home/higher_data/safe"
					},
					{
						name: "账户绑定",
						path: "/Home/higher_data/social"
					}
				],
				// 当前导航选择项
				menuChecked: 0
			}
		},
		computed: {

			...mapState(['loginUserInfo'])

		},
		mounted() {

			// 初始化导航选择焦点
			this.follow()
		},
		methods: {
			// 点击了导航项
			clickMenu(index) {
				this.menuChecked = index
				this.follow(index)
				this.$router.push({
					path: this.menu[index].path
				})
			},
			// 导航焦点跟随
			follow(index=0) {
				let menuDom = document.querySelector('.router-menu')
				let menuCheckedDom = document.querySelector('.router-menu-checked')
				menuCheckedDom.style.width = menuDom.children[index].offsetWidth + 'px'
				menuCheckedDom.style.left = menuDom.children[index].offsetLeft + 'px'
			}
		}

	}
</script>

<style scoped="scoped">
	.page {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.base-data,
	.data-router {
		border-radius: 15px;
		overflow: hidden;
	}


	.base-data {
		width: 26%;
		height: 100%;
		background-color: #fff;
		margin-right: 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.user-name {
		margin: 20px 0px;
		text-align: center;
		font-size: 22px;
		cursor: default;
		text-decoration: inherit;
		-webkit-user-select: none;
	}

	.avatar {
		width: 90px;
		height: 90px;
		background-color: #C3C3C3;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
		border: 1px solid #0081FF;
	}

	.avatar img {
		width: 100%;
		height: 100%;
	}

	.edit-avatar {
		position: absolute;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
		width: 90px;
		height: 30px;
		background-color: #C3C3C344;
		text-align: center;
		line-height: 30px;
		color: #fff;
		font-weight: bold;
		transition: .3s all linear;
	}

	.edit-avatar:hover {
		background-color: #C3C3C3;
	}

	.user-autograph {
		margin-bottom: 20px;
		cursor: default;
		transition: .3s all linear;
	}

	.user-autograph:hover {
		color: #2269F3;
	}


	.top {
		padding-top: 35px;
		box-sizing: border-box;
		height: 60%;
		display: flex;
		flex-direction: column;
	}

	.bottom {
		border-top: 2px solid #C3C3C344;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		text-align: center;
		padding: 15px 0px;
		box-sizing: border-box;
		color: #555555;
		font-size: 12px;
		font-weight: bold;
		font-family: '微软雅黑';
		cursor: default
	}

	.bottom p {
		margin: 8px 0px;
	}

	.come,
	.myname {
		color: #0081FF;

	}

	.come {
		margin-left: 6px;
	}


	.data-router {
		background-color: #fff;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.router {
		flex: 1;
		overflow: auto;
	}

	.router-menu {

		width: 100%;
		height: 60px;
		background-color: #2269F3;
		position: relative;

	}

	.router-menu-li {
		height: 100%;
		padding: 0px 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #fff;
		cursor: default;
	}

	.router-menu-checked {
		position: absolute;
		bottom: 0;
		width: 100px;
		height: 3px;
		background-color: #F69C00;
		transition: .2s all linear;
	}
</style>
